<template>
  <!-- 公告页面 -->
  <div>
    <ComGroup title="添加内容" tips="最多添加10条 多余的滚动展示" :name-black="true"></ComGroup>
    <ComGroup :bg-gray="true" :content-block="true">
      <PicList :image-list.sync="configData.noticelist" add-place-holder="添加内容" :show-pic="false" />
    </ComGroup>
    <!-- 配置图标 -->
    <ComGroup title="配置图标">
      <el-button type="text" class="mr-15" @click="configData.imageUrl=''">重置</el-button>
      <UpLoadBox :img-url.sync="configData.imageUrl" />
    </ComGroup>
    <!-- 设置背景颜色 -->
    <ComGroup title="背景颜色">
      <el-button type="text" class="mr-15" @click="configData.backgroundColor=initBgColor">重置</el-button>
      <!-- 背景颜色选择器 -->
      <el-color-picker v-model="configData.backgroundColor" size="small"/>
    </ComGroup>
     <!-- 设置文字颜色 -->
     <ComGroup title="文字颜色">
      <el-button type="text" class="mr-15" @click="configData.textColor=initTextColor">重置</el-button>
      <!-- 文字颜色选择器 -->
      <el-color-picker v-model="configData.textColor" size="small"/>
    </ComGroup>
  </div>
</template>

<script>
import ComGroup from '@/components/BasicUi/ComGroup.vue'
import PicList from '@/components/BasicConfig/PicList.vue';
import UpLoadBox from '@/components/BasicUi/UpLoadBox'

export default {

  name: 'Notice',
  props: ['parmes'],
  components: {
    ComGroup,
    PicList,
    UpLoadBox
  },

  data() {
    return {
      //  当前组件的数据
      configData: JSON.parse(JSON.stringify(this.parmes)),
      //初始的背景颜色
      initBgColor:'#FFF8E9',
      //初始文本颜色
      initTextColor:'#666666'
    };
  },
  watch: {
    configData:{
      handler:function(newVal){
        //pick组件里的数据变化后因为双向绑定所以被监听到 然后把数据传给上一级组件
        this.$emit('editComponent',newVal)
      },
      deep:true
    }
  },
  mounted() {

  },
  methods: {

  },
};
</script>